import React, { useState } from'react';
import { useLocation, useNavigate } from'react-router-dom';

const OrderSettlement = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const selectedStore = location.state?.selectedStore;

    const [orderItem, setOrderItem] = useState({
        name: '创意卫浴五件套 欧式高档卫生间洗漱...',
        originalPrice: 250,
        discountedPrice: 200,
        quantity: 2,
        totalPrice: 400
    });

    const [deliveryMethod, setDeliveryMethod] = useState('送货上门');
    const [address, setAddress] = useState('');
    const [contactName, setContactName] = useState('');
    const [contactPhone, setContactPhone] = useState('');
    const [remark, setRemark] = useState('');

    const [showPaymentConfirmModal, setShowPaymentConfirmModal] = useState(false);
    const [showInfoIncompleteModal, setShowInfoIncompleteModal] = useState(false);
    const [isPaymentConfirming, setIsPaymentConfirming] = useState(false);

    const calculateDeliveryFee = () => {
        if (deliveryMethod === '送货上门') {
            return 20;
        } else {
            return 0;
        }
    };

    const calculateTotalAmount = () => {
        return orderItem.totalPrice + calculateDeliveryFee();
    };

    const checkRequiredInfo = () => {
        if (deliveryMethod === '送货上门' && address.trim() === '') {
            return false;
        }
        if (deliveryMethod === '门店自取' && (!selectedStore || selectedStore.name.trim() === '')) {
            return false;
        }
        if (contactName.trim() === '') {
            return false;
        }
        if (contactPhone.trim() === '') {
            return false;
        }
        return true;
    };

    const handlePayClick = () => {
        if (checkRequiredInfo()) {
            setIsPaymentConfirming(true);
            setTimeout(() => {
                setIsPaymentConfirming(false);
                setShowPaymentConfirmModal(true);
            }, 2000);
        } else {
            setShowInfoIncompleteModal(true);
        }
    };

    const handleClosePaymentConfirmModal = () => {
        setShowPaymentConfirmModal(false);
    };

    const handleCloseInfoIncompleteModal = () => {
        setShowInfoIncompleteModal(false);
    };

    const handleSelectStoreClick = () => {
        navigate('/mengdian');
    };

   
    const handleRedirectToAlipay = () => {
      
        navigate('/pay');
    };

    return (
        <div style={{ backgroundColor: '#e6f7ff', padding: '20px' }}>
            <div style={{ fontWeight: 'bold', fontSize: '18px', marginBottom: '20px' }}>订单结算</div>

            <div style={{ backgroundColor: 'white', borderRadius: '10px', padding: '20px', marginBottom: '20px' }}>
                <div style={{ fontWeight: 'bold', fontSize: '16px', marginBottom: '10px' }}>订单详情</div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <img src="http://t14.baidu.com/it/u=1293879872,303967190&fm=224&app=112&f=JPEG?w=500&h=5001" alt="订单商品图片" style={{ width: '80px', height: '80px', marginRight: '10px' }} />
                    <div>
                        <p>{orderItem.name}</p>
                        <p style={{ color: 'red' }}>{orderItem.originalPrice}币 - {orderItem.discountedPrice}币</p>
                        <p style={{ color: 'red' }}>X{orderItem.quantity}</p>
                        <p style={{ color: 'red', fontWeight: 'bold', fontSize: '18px' }}>{orderItem.totalPrice}币</p>
                    </div>
                </div>
            </div>

            <div style={{ backgroundColor: 'white', borderRadius: '10px', padding: '20px' }}>
                <div style={{ fontWeight: 'bold', fontSize: '16px', marginBottom: '10px' }}>收货人详情</div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <input type="radio" name="deliveryMethod" checked={deliveryMethod === '送货上门'} onChange={() => setDeliveryMethod('送货上门')} />
                    <label style={{ marginRight: '20px' }}>送货上门</label>
                    <input type="radio" name="deliveryMethod" checked={deliveryMethod === '门店自取'} onChange={() => setDeliveryMethod('门店自取')} />
                    <label>门店自取</label>
                </div>
                {deliveryMethod === '送货上门' && (
                    <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                        <label style={{ marginRight: '10px' }}>详细地址：</label>
                        <input type="text" value={address} onChange={(e) => setAddress(e.target.value)} style={{ flex: 1, border: '1px solid #ccc', borderRadius: '5px', padding: '5px' }} />
                    </div>
                )}
                {deliveryMethod === '门店自取' && (
                    <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                        <label style={{ marginRight: '10px' }}>门店选择：</label>
                        <input
                            type="text"
                            value=""
                            readOnly
                            style={{ flex: 1, border: '1px solid #ccc', borderRadius: '5px', padding: '5px' }}
                        />
                        <button onClick={handleSelectStoreClick} style={{ backgroundColor: '#1E90FF', color: 'white', border: 'none', borderRadius: '5px', padding: '5px 10px', marginLeft: '10px' }}>
                            选择
                        </button>
                    </div>
                )}
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <label style={{ marginRight: '10px' }}>取货人：</label>
                    <input type="text" value={contactName} onChange={(e) => setContactName(e.target.value)} style={{ flex: 1, border: '1px solid #ccc', borderRadius: '5px', padding: '5px' }} />
                </div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <label style={{ marginRight: '10px' }}>联系电话：</label>
                    <input type="text" value={contactPhone} onChange={(e) => setContactPhone(e.target.value)} style={{ flex: 1, border: '1px solid #ccc', borderRadius: '5px', padding: '5px' }} />
                </div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <label style={{ marginRight: '10px' }}>备注：</label>
                    <input type="text" value={remark} onChange={(e) => setRemark(e.target.value)} style={{ flex: 1, border: '1px solid #ccc', borderRadius: '5px', padding: '5px' }} />
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
                    <div>
                        <p>配送费：</p>
                        <p style={{ color: 'red', fontWeight: 'bold' }}>{calculateDeliveryFee()}币</p>
                    </div>
                    <div>
                        <p>合计：</p>
                        <p style={{ color: 'red', fontWeight: 'bold', fontSize: '18px' }}>{calculateTotalAmount()}币</p>
                    </div>
                </div>
            </div>

            <div style={{ backgroundColor: '#1E90FF', color: 'white', borderRadius: '5px', padding: '10px', textAlign: 'center', marginTop: '20px' }} onClick={handlePayClick}>
                {isPaymentConfirming? '正在确认支付...' : '立即支付'}
            </div>

            {showPaymentConfirmModal && (
                <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0, 0, 0, 0.5)', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <div style={{ backgroundColor: 'white', borderRadius: '10px', padding: '20px', width: '80%', maxWidth: '400px' }}>
                        <div style={{ textAlign: 'center', marginBottom: '20px' }}>
                            <p style={{ color: 'red', fontWeight: 'bold', fontSize: '24px' }}>{calculateTotalAmount()}币</p>
                        </div>
                        <div style={{ marginBottom: '20px' }}>
                            <p>订单信息：{orderItem.name}</p>
                            <p>配送方式：{deliveryMethod}</p>
                        </div>
                        <div style={{ textAlign: 'center' }}>
                            <button style={{ backgroundColor: '#1E90FF', color: 'white', border: 'none', borderRadius: '5px', padding: '10px 20px' }} onClick={handleRedirectToAlipay}>
                                立即支付
                            </button>
                        </div>
                        <div style={{ textAlign: 'right', marginTop: '20px' }}>
                            <button style={{ backgroundColor: 'transparent', border: 'none', cursor: 'pointer' }} onClick={handleClosePaymentConfirmModal}>
                                取消支付
                            </button>
                        </div>
                    </div>
                </div>
            )}

            {showInfoIncompleteModal && (
                <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0, 0, 0, 0.5)', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <div style={{ backgroundColor: 'white', borderRadius: '10px', padding: '20px', width: '80%', maxWidth: '400px' }}>
                        <div style={{ textAlign: 'center', marginBottom: '20px' }}>
                            <p>信息为空，请填写</p>
                        </div>
                        <div style={{ textAlign: 'center' }}>
                            <button style={{ backgroundColor: '#1E90FF', color: 'white', border: 'none', padding: '10px 20px' }} onClick={handleCloseInfoIncompleteModal}>
                                确定
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}

export default OrderSettlement;